import React, { useEffect, useState } from "react";
import { Layout, Menu } from "antd";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { DesktopOutlined, HomeOutlined } from "@ant-design/icons";
import Head from "./Head";
import "./index.css";

const { Header, Content, Footer, Sider } = Layout;

export default () => {
	// 获取当前路由路径,也是菜单选项的key
	const { pathname } = useLocation();

	const navigate = useNavigate();

	useEffect(() => {
		if (pathname === "/") {
			navigate("/home", { replace: true });
		}
	}, []);

	const [collapsed, setCollapsed] = useState(false);

	const onCollapse = (collapsed) => {
		setCollapsed(collapsed);
	};

	const handleClick = ({ key }) => {
		navigate(key);
	};

	return (
		<Layout style={{ minHeight: "100vh" }}>
			<Sider
				collapsible
				collapsed={collapsed}
				onCollapse={(e) => onCollapse(e)}
			>
				<div className="h-[32px] m-[16px] bg-slate-400" />

				<Menu
					theme="dark"
					onClick={(e) => handleClick(e)}
					defaultSelectedKeys={[pathname]}
					mode="inline"
				>
					<Menu.Item key="/home" icon={<HomeOutlined />}>
						首页
					</Menu.Item>
					<Menu.Item key="/one" icon={<DesktopOutlined />}>
						功能1
					</Menu.Item>
				</Menu>
			</Sider>

			<Layout className="site-layout">
				<Header className="site-layout-background flex justify-end items-center p-2">
					<Head />
				</Header>

				<Content>
					<Outlet />
				</Content>

				<Footer style={{ textAlign: "center" }}>
					Ant Design ©2018 Created by Ant UED
				</Footer>
			</Layout>
		</Layout>
	);
};
